<!--报表设置-->
<<template>
<div>
<div class="table">
		<row>
		    <div class="divmenu">
			    <i-col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
				     <i-button  size="large" @click="Add" type="primary" class="searchButton">
					     <p class="title">
						     <Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;<span>新增</span>
					     </p>
				     </i-button>
			     </i-col>
		    </div>
	    </row>
        <div class="divSearch" style="padding: 6px;">
			<Row>
				<Col span="24" class="col-margin">
					所属报表:
					<Select v-model="SearchModel.TableCode" style="width:250px" placeholder="全部" @on-change="initTableData()">
						<Option :value="item.DictValue" v-for="item in ReportNameList" :key="item.DictValue">{{item.DictText}}({{item.DictValue}})</Option>
					</Select>
					所属父级:
					<Select v-model="SearchModel.ParentCode" style="width:250px" placeholder="全部" filterable @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option v-for="option in SearchModel.options" :value="option.ItemCode" :key="option.ItemCode" :label="option.ItemName">
							<span>
								<b>{{option.ItemName}}</b>
							</span>
							<br/>
							<span style="color:#8d8b8b">代码:{{option.ItemCode}}</span>
							<br/>
							<span style="color:#8d8b8b">父级代码:{{option.ParentCode}}</span>
						</Option>
					</Select>
					分类名称:
					<Input v-model="SearchModel.ItemName" placeholder="请输入查询的分类名称..." style="width: 150px"></Input>
					分类代码:
					<Input v-model="SearchModel.ItemCode" placeholder="请输入查询的分类代码..." style="width: 150px"></Input>
					状态:
					<Select v-model="SearchModel.Status" style="width:100px" placeholder="全部" @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option value="1">启用</Option>
						<Option value="0">停用</Option>
					</Select>
					<Button icon="ios-search" @click="initTableData()">检索</Button>
				</Col>
			</Row>
		</div>		
	    <row><!--数据表格-->
		    <i-col>
			    <i-table :context="self" ref="table" :stripe=true :columns="columnsData" 
				:data="tabledata" size="large" @on-select-all="selectAll()"
				 @on-select="selectSingel()" :height="clientHeight" border>
			    </i-table>
		    </i-col>
	    </row>
	    <row><!--分页插件-->
		    <div class="dataTable">		   
			    <i-col>
					 <!-- <spin size="large"></spin> -->
			    	 <Page style="float:right;margin: 5px 20px 5px 0;" :total="tableTotal" show-elevator show-sizer show-total placement="top"  @on-change="changePage"
					  @on-page-size-change="changePageSize" :page-size-opts='pageSizeOpts' :page-size="20">
			    	 </Page>
			    </i-col>
			</div>
	    </row>
    </div>
      <!--填报项目设置编辑弹窗-->
     <Modal v-model="ShowModal"  :mask-closable="false" >
	    <p style="display:none"  slot="close" @click="cancel('setListModel')"> <Icon type="close-circled" color="red" size="25"></Icon></p>
	    <p slot="header"  class="title">       
            <span style="font-size: 20px">报表分类信息编辑</span>
        </p>
		<Form ref="setListModel" :model="setListModel" :rules="setListRule" :label-width="80">
            <Form-item label="所属报表" prop="TableCode">
				<Select v-model="setListModel.TableCode" placeholder="请选择报表" @on-change="getEditItemList">
					<Option v-for="item in ReportNameList" :value="item.DictValue" :key="item.DictValue">{{item.DictText}}({{item.DictValue}})</Option>
				</Select>
			</Form-item>
			<Form-item label="所属父级分类" prop="ParentCode">
                <Select v-model="setListModel.ParentCode" placeholder="无父级分类" filterable>
					<Option value="">无父级分类</Option>
					<Option v-for="option in editOptionList" :value="option.ItemCode" :key="option.ItemCode" :label="option.ItemName">
						<span>
							<b>{{option.ItemName}}</b>
						</span>
						<br/>
						<span style="color:#8d8b8b">代码:{{option.ItemCode}}</span>
						<br/>
						<span style="color:#8d8b8b">父级代码:{{option.ParentCode}}</span>
					</Option>
				</Select>	
			</Form-item>
            <Form-item label="分类名称" prop="ItemName">
				<Input v-model="setListModel.ItemName" placeholder="请输入分类名称"></Input>
			</Form-item>
			<Form-item label="分类代码" prop="ItemCode">
				<Input v-model="setListModel.ItemCode" placeholder="请输入分类代码"></Input>
			</Form-item>
			<Form-item label="计量单位" prop="UnitName">
				<Input v-model="setListModel.UnitName" placeholder="请输入计量单位"></Input>
			</Form-item>
			<Form-item label="分类状态" prop="Status">
				<Select v-model="setListModel.Status" placeholder="请选择分类状态">
					<Option value="1">启用</Option>
					<Option value="0">禁用</Option>
				</Select>
			</Form-item>
			<Form-item label="排序编号" prop="Sort">
				<Input v-model="setListModel.Sort" placeholder="请输入排序号"></Input>
			</Form-item>
			<Form-item label="分类描述" prop="Remark">
				<Input v-model="setListModel.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
			</Form-item>
		</Form>
	    <div slot="footer">	
                <Button  @click="cancel('setListModel')">取消</Button>&nbsp;&nbsp;
                <Button  type="primary"  @click="handleSubmit('setListModel')">保存</Button>
        </div>
    </Modal>
</div>
</template>
<script>
export default {
	data() {
		return {
			self: this,
			tableTotal: 0,//表格记录条数
			ShowModal: false,//modal开关,针对form填报表格
			tabledata: [],	//页面表格数据	
			ReportNameList: this.GetGroupDict("ReportTableName"),//报表名称列表
			ParentClassList: [],//父分类列表
			UploadModal: false,
			pageSizeOpts: [20, 40, 50],//默认分页最大设置
			clientHeight: window.innerHeight - 315,//设置表格高度
			columnsData: [
				// {type: 'selection',width: 60,align: 'center'},
				{ title: '父级分类', key: 'ParentCode' },
				{ title: '分类名称', key: 'ItemName', ellipsis: true },
				{ title: '分类代码', key: 'ItemCode' },
				{ title: '计量单位', key: 'UnitName' },
				{ title: '分类状态', key: 'StatusName' },
				{ title: '排序编号', key: 'Sort' },
				{ title: '所属报表', key: 'TableName' },
				{ title: '分类描述', key: 'Remark', ellipsis: true },
				{
					title: '操作', key: 'action', width: 180, align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								class: { ieditColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-compose'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Edit(params.row.Id)
									}
								}
							}, '编辑'),
							h('Button', {
								class: { ideleteColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-trash-outline'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Remove(params.row.Id)
									}
								}
							},'删除')
						])
					}
				}
			],
			SearchModel: { PageNumber: 1, PageSize: 20, ParentCode: '', ItemName: '', ItemCode: '', UnitName: '', Status: '', TableName: '', Remark: '', options: [], },
			setListModel: { Id: 0, ParentCode: '', ItemName: '', ItemCode: '', UnitName: '', Status: 1, Remark: '', TableCode: '',loading: false,
                SetIds: [] },
			editOptionList: [],
			//表单验证规则
			setListRule: {//表单验证规则
				TableCode: [{ required: true, message: '请选择所属报表', trigger: 'change' }],
				ItemName: [{ required: true, message: '请填写分类代码', trigger: 'blur' }],
				ItemCode: [{ required: true, message: '请填写分组代码', trigger: 'blur' }],
				Status: [{ required: true, message: '请选择状态', trigger: 'change' }]
			}
		}
	},
	mounted: function () {//根据浏览器窗口大小设置数据表格宽度
		const that = this;
		window.onresize = () => {
			return (() => {
				that.clientHeight = window.innerHeight - 315;
			})()
		};

	},
	methods: {
		//-----------------------------------------------数据导入---------------------------------------\\
		ShowUploadModal: function () {//打开模态框
			this.UploadModal = true;
		},
		closeUpload: function () {//关闭模态框
			this.UploadModal = false;
		},
		handleFormatError(file) {//判断选中的文件格式
			this.$Notice.warning({
				title: '文件格式不正确',
				desc: '文件 ' + file.name + ' 格式不正确，请上传 excel 文件。'
			});
		},
		handleSuccess: function (res, file) {//导入成功
			this.$Notice.success({
				title: '文件' + file.name + '数据导入成功!'
			});
			this.initTableData();
		},
		handelError: function (error, file, fileList) {//导入失败
			this.$Notice.error({
				title: '文件' + file.name + '数据导入失败!'
			});
		},
		//-----------------------------------------------数据导入---------------------------------------\\
		getSearchItemList() {
			if (this.SearchModel.TableCode != null && this.SearchModel.TableCode != '') {
				var self = this;
				this.$http.get('SetList/GetSearchList', { params: { tableCode: this.SearchModel.TableCode } }).then(function (res) {
					self.SearchModel.options = res.data.model;
				});
			}
		},
		getEditItemList(tablecode) {
			var self = this;
			this.$http.get('SetList/GetSearchList', { params: { tableCode: tablecode } }).then(function (res) {
				self.editOptionList = res.data.model;
			});
		},
		Add: function () {
			this.ParentClassList = [];
			this.ShowModal = true;
		},
		handleSubmit: function (modelName) {
			var self = this;
			self.$refs[modelName].validate((valid) => {
				if (valid) {
					if (self.setListModel.Id === 0) {
						self.$http.post('SetList', self.setListModel).then(function (res) {
							if (res.data.status === 1) {
								self.$Notice.success({
									title: '报表分类添加成功!'
								});
								self.initTableData();
								self.ShowModal = false;
							}
							else {
								self.$Notice.warning({
									title: res.data.message
								});
							}
						});
					}
					else {//数据编辑
						self.$http.put('SetList', self.setListModel).then(function (res) {
							if (res.data.status === 1) {
								self.$Notice.success({
									title: '报表分类编辑成功!'
								});
								self.initTableData();
								self.ShowModal = false;
							}
							else {
								self.$Notice.warning({
									title: res.data.message
								});
							}
						});
					}
				}
			});
		},
		cancel: function (name) {//关闭新增对话框
			this.$refs[name].resetFields();//关闭表单校验
			this.ShowModal = false;//关闭对话框
		},
		Edit: function (ID) {
			var self = this;
			this.$http.get("SetList", { params: { id: ID } }).then(//获取数据编辑项的值
				function (res) {
					if (res.data.status == 1) {
						self.getEditItemList(res.data.model.TableCode);
						self.setListModel = res.data.model;
						self.ShowModal = true;//打开信息编辑modal
					}
					else {
						self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
					}
				}
			);
		},
		initTableData: function () {//初始化表格数据
			this.getSearchItemList();
			var self = this;
			self.$http.post('SetList/PostPageList', self.SearchModel).then(function (res) {
				if (res.data.status === 1) {
					self.tabledata = res.data.rows;
					self.tableTotal = res.data.total;
				}
				else {
					self.$Notice.warning({
						title: res.data.message
					});
				}
			});
		},
		//删除
		Remove(id) {
			var self = this;
			self.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.$http.delete("SetList", { params: { id: id } }).then(
						function (res) {
							if (res.data.status == 1) {
								self.$Notice.success({ title: '删除成功！', desc: false });
								self.initTableData();
							}
							else {
								self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
							}
						}
					);
				}
			});
		},
		changePage: function (pageIndex) {//改变页码事件
			this.SearchModel.PageNumber = pageIndex;
			this.initTableData();
		},
		changePageSize: function (pageSize) {//改变页面记录条数事件
			this.SearchModel.PageSize = pageSize;
			this.initTableData();
		}
	},
	created: function () { //初始化函数
		this.initTableData();
	},
	watch: {
	}
}
</script>